<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>托盘展示</title>

    <script type="text/javascript" src="/js/staticResources/js/jquery.min.js"></script>

    <style>
        .tp{
            border: 1px solid;
            width:90px;
            height:100px;
            position: absolute;
        }
        #title{
            margin-left:700px;
            margin-top: 50px;

        }

        #first{
            width: 1440px;
            height: 100px;
            border: 1px solid;
            margin-top: 50px;
            margin-left: 50px;
        }
        #second{
            width: 1440px;
            height: 100px;
            border: 1px solid;
            margin-top:110px;
            margin-left: 50px;
        }
        #tp1{
            margin-left:0px;
        }
        #tp2{
            margin-left:90px;
        }
        #tp3{
            margin-left:180px;
        }
        #tp4{
            margin-left:270px;
        }
        #tp5{
            margin-left:360px;
        }
        #tp6{
            margin-left:450px;
        }
        #tp7{
            margin-left:540px;
        }
        #tp8{
            margin-left:630px;
        }
        #tp9{
            margin-left:720px;
        }
        #tp10{
            margin-left:810px;
        }
        #tp11{
            margin-left:900px;
        }
        #tp12{
            margin-left:990px;
        }
        #tp13{
            margin-left:1080px;
        }
        #tp14{
            margin-left:1170px;
        }
        #tp15{
            margin-left:1260px;
        }
        #tp16{
            margin-left:1350px;
        }
        #tp17{
            margin-left:0px;
        }
        #tp18{
            margin-left:90px;
        }
        #tp19{
            margin-left:180px;
        }
        #tp20{
            margin-left:270px;
        }
        #tp21{
            margin-left:360px;
        }
        #tp22{
            margin-left:450px;
        }
        #tp23{
            margin-left:540px;
        }
        #tp24{
            margin-left:630px;
        }
        #tp25{
            margin-left:720px;
        }
        #tp26{
            margin-left:810px;
        }
        #tp27{
            margin-left:900px;
        }
        #tp28{
            margin-left:990px;
        }
        #tp29{
            margin-left:1080px;
        }
        #tp30{
            margin-left:1170px;
        }
        #tp31{
            margin-left:1260px;
        }
        #tp32{
            margin-left:1350px;
        }
        .circle{
            width: 50px;
            height: 50px;
            margin: 25px;
            border-radius: 50%;
        }
        #circle1{
            width: 50px;
            height: 50px;
            margin: 25px;
            border-radius: 50%;
            background-color: red;
            margin-left:800px;

        }

        #circle2{
            width: 50px;
            height: 50px;
            margin: 25px;
            border-radius: 50%;
            background-color: green;
            margin-left:800px;
        }


    </style>

</head>
<body>
<div id="title"><h1>托盘状态实时监控</h1></div>
<div id="first">
    <div id="tp1" class="tp">
        <div id="c32" class="circle"></div>
    </div>
    <div id="tp2" class="tp">
        <div id="c31" class="circle"></div>
    </div>
    <div id="tp3" class="tp">
        <div id="c30" class="circle"></div>
    </div>
    <div id="tp4" class="tp">
        <div id="c29" class="circle"></div>
    </div>
    <div id="tp5" class="tp">
        <div id="c28" class="circle"></div>
    </div>
    <div id="tp6" class="tp">
        <div id="c27" class="circle"></div>
    </div>
    <div id="tp7" class="tp">
        <div id="c26" class="circle"></div>
    </div>
    <div id="tp8" class="tp">
        <div id="c25" class="circle"></div>
    </div>
    <div id="tp9" class="tp">
        <div id="c24" class="circle"></div>
    </div>
    <div id="tp10" class="tp">
        <div id="c23" class="circle"></div>
    </div>
    <div id="tp11" class="tp">
        <div id="c22" class="circle"></div>
    </div>
    <div id="tp12" class="tp">
        <div id="c21" class="circle"></div>
    </div>
    <div id="tp13" class="tp">
        <div id="c20" class="circle"></div>
    </div>
    <div id="tp14" class="tp">
        <div id="c19" class="circle"></div>
    </div>
    <div id="tp15" class="tp">
        <div id="c18" class="circle"></div>
    </div>
    <div id="tp16" class="tp">
        <div id="c17" class="circle"></div>
    </div>
</div>
<div id="second">
    <div id="tp17" class="tp">
        <div id="c16" class="circle"></div>
    </div>
    <div id="tp18" class="tp">
        <div id="c15" class="circle"></div>
    </div>
    <div id="tp19" class="tp">
        <div id="c14" class="circle"></div>
    </div>
    <div id="tp20" class="tp">
        <div id="c13" class="circle"></div>
    </div>
    <div id="tp21" class="tp">
        <div id="c12" class="circle"></div>
    </div>
    <div id="tp22" class="tp">
        <div id="c11" class="circle"></div>
    </div>
    <div id="tp23" class="tp">
        <div id="c10" class="circle"></div>
    </div>
    <div id="tp24" class="tp">
        <div id="c9" class="circle"></div>
    </div>
    <div id="tp25" class="tp">
        <div id="c8" class="circle"></div>
    </div>
    <div id="tp26" class="tp">
        <div id="c7" class="circle"></div>
    </div>
    <div id="tp27" class="tp">
        <div id="c6" class="circle"></div>
    </div>
    <div id="tp28" class="tp">
        <div id="c5" class="circle"></div>
    </div>
    <div id="tp29" class="tp">
        <div id="c4" class="circle"></div>
    </div>
    <div id="tp30" class="tp">
        <div id="c3" class="circle"></div>
    </div>
    <div id="tp31" class="tp">
        <div id="c2" class="circle"></div>
    </div>
    <div id="tp32" class="tp">
        <div id="c1" class="circle"></div>
    </div>
</div>
<div id="red">
    <div id="circle1"></div><h3  style="margin-left:770px;">托盘已被占用</h3>
</div>
<div id="green">
    <div id="circle2"></div><h3 style="margin-left:770px;">托盘未被占用</h3>
</div>

<script>
    $(function () {
        gettps();
    });
    setInterval(gettps,1000);
    function gettps(){
        $.ajax({
            type:"get",
            url:"/tps",
            contentType:"application/json",
            success:function (data) {
                console.log("成功");
                data.forEach(function (value,index) {
                    index+=1;
                    console.log(index);
                    console.log("我是value值:"+value.itemSn);
                    if(value.itemSn == null){//未被占用
                        document.getElementById("c"+index).style = "background-color:green";
                        document.getElementById("c"+index).title = "TpId:" + value.id + "\n" + "positionId:" + value.positionId;
                    } else{//已被占用
                        document.getElementById("c" + index).style = "background-color:red";
                        document.getElementById("c" + index).title = "TpId:" + value.id+ "\n" + "positionId:" + value.positionId;
                    }// }else{
                    //     document.getElementById("c"+index).style = "background-color:white";
                })
            },
            error:function () {
                console.log("失败");
            }
        })

    }


</script>


</body>
</html>